<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/layout.css">
    <script src="./jquery-3.1.1.js"></script>
    <style>
        .main-content {
            width: 980px;
            height: 660px;
            position: relative;
            background: url(images/bg.gif);
        }
        .left-nav {
            width: 200px;
            height: 100%;
            float: left;
        }
        .content {
            width: 525px;
            height: 100%;
            float: left;
        }
        .right-nav {
            width: 255px;
            height: 100%;
            float: left;
            position: relative;
        }
        .left-nav h1 {
            color: #FE8D64;
            font-size: 20px;
            margin: auto 25px;
        }
        .left-nav ul {
            width: 200px;
            height: 148px;
            
        }
        .left-nav ul li{
           float: left;
           height: 23px;
           width: 50px;
            text-align: center;
            margin: 1px 7px;
        }
        
        .content-bottom {
            width: 525px;
            height: 415px;
            margin: 40px 0 0 13px;
        }
        /* 中部整体 */
        .chunk {
            width: 175px;
            height: 138px;
            float: left;
            position: relative;
        }
        /* 中部图片样式 */
        .content-img {
            width: 135px;
            height: 120px;
            margin: 10px 30px;
        }
        /* 中部文字样式 */
        .chunk span {
            position: absolute;
            bottom:0px;
            left: 10px;
            text-align: center;
        }
        /* 右侧整体块 */
        .right-father {
            width: 232px;
            height: 262px;
            position: absolute;
            top: 171px;
            left: 22px;
        }
        /* 右侧图片块 */
        .right-chunk {
            width: 232px;
            height: 64px;
            position: relative;
        }
        /* 右侧图片样式 */
        .right-img {
            height: 46px;
            width: 53px;
            border: 1px solid black;
            margin: 5px 10px;
        }
        .right-chunk span{
            position: absolute;
            top: 10px;
            right: 20px;
        }
        /* 轮播图样式 */
        .content-top {
            height: 190px;
            width: 525px;
            margin-left: 13px;
            position: relative;
            text-align: center;
        }
        .content-top .pic a {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .content-top .pic a.current {
            display: block;
        }
        .indicator {
            position: absolute;
            bottom: 5px;
            left: 15px;
        }
        .indicator span {
            background-color: #CCCCCC;
            color: white;
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
        }
        .indicator span.active {
            background-color: tomato;
            border: 2px solid red;
        }
        .page .next {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .page .prev {
            position: absolute;
            right: 50px;
            bottom: 10px;
        }
        .page span {
            display: inline-block;
            background-color: #CCCCCC;
            width: 20px;
            height: 20px;
            line-height: 20px;
            color: white;
            font-size: 25px;
            cursor: pointer;
        }
        .page span:hover {
            background-color: rgba(100, 100, 100, 0.8);
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="header">
            <iframe src="header.html" frameborder="0" style="width: 980px;height: 135px;"></iframe>
        </div>
        <div class="main-content">
            <div class="left-nav">
                <ul style="margin-top: 38px;"> 
                    <h1>家用电器</h1>
                    <li>大家电</li>
                    <li>洗衣机</li>
                    <li>平板电视</li>
                    <li>电热水器</li>
                    <li>家庭音响</li>
                    <li>热水器</li>
                    <li>空调冰箱</li>
                    <li>冷柜</li>
                    <li>DVD</li>
                    <li>电视附件</li>
                    <li>点燃起</li>
                    <li>家电下乡</li>
                    <li>家电服务</li>
                    <li>电饭煲</li>
                    <li>摄像机</li>
                </ul>
                <ul>
                    <h1>书籍</h1>
                    <li>大家电</li>
                    <li>洗衣机</li>
                    <li>平板电视</li>
                    <li>电热水器</li>
                    <li>家庭音响</li>
                    <li>热水器</li>
                    <li>空调冰箱</li>
                    <li>冷柜</li>
                    <li>DVD</li>
                    <li>电视附件</li>
                    <li>点燃起</li>
                    <li>家电下乡</li>
                    <li>家电服务</li>
                    <li>电饭煲</li>
                    <li>摄像机</li>
                </ul>
                <ul>
                    <h1>手机数码</h1>
                    <li>大家电</li>
                    <li>洗衣机</li>
                    <li>平板电视</li>
                    <li>电热水器</li>
                    <li>家庭音响</li>
                    <li>热水器</li>
                    <li>空调冰箱</li>
                    <li>冷柜</li>
                    <li>DVD</li>
                    <li>电视附件</li>
                    <li>点燃起</li>
                    <li>家电下乡</li>
                    <li>家电服务</li>
                    <li>电饭煲</li>
                    <li>摄像机</li>
                </ul>
                <ul>
                    <h1>日用百货</h1>
                    <li>大家电</li>
                    <li>洗衣机</li>
                    <li>平板电视</li>
                    <li>电热水器</li>
                    <li>家庭音响</li>
                    <li>热水器</li>
                    <li>空调冰箱</li>
                    <li>冷柜</li>
                    <li>DVD</li>
                    <li>电视附件</li>
                    <li>点燃起</li>
                    <li>家电下乡</li>
                    <li>家电服务</li>
                    <li>电饭煲</li>
                    <li>摄像机</li>
                </ul>
            </div>
            <div class="content">
                <div class="content-top">
                    <div class="pic">
                        <a href="" class="current">
                            <img src="images/ad-01.jpg" alt="">
                        </a>
                        <a href="">
                            <img src="images/ad-02.jpg" alt="">
                        </a>
                        <a href="">
                            <img src="images/ad-03.jpg" alt="">
                        </a>
                        <a href="">
                            <img src="images/ad-04.jpg" alt="">
                        </a>
                    </div>
                    <div class="indicator">
                        <span class="active">1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                    </div>
                    <div class="page">
                        <span class="prev"> < </span>
                        <span class="next"> > </span>
                    </div>
                    



                </div>
                <div class="content-bottom">
                    <div class="chunk">
                        <div class="content-img"><img src="images/promote-1.jpg" alt=""></div>
                        <span>惠普上午移动应用英寸笔记本</span>
                    </div>
                    <div class="chunk">
                        <div class="content-img"><img src="images/promote-2.jpg" alt=""></div>
                        <span>夏新N6 GPS真人语音导航手机超低特价疯抢 数量有限！</span>
                    </div>
                    <div class="chunk">
                        <div class="content-img"><img src="images/promote-3.jpg" alt=""></div>
                        <span>三星家庭影院 <HT-TZ325>购机送好礼（超值性价比）</HT-TZ325></span>
                    </div>
                    <div class="chunk">
                        <div class="content-img"><img src="images/laser-pen.jpg" alt=""></div>
                        <span>明基MP512投影机2899元送100元京卷 SVGA 2200流明</span>
                    </div>
                    <div class="chunk">
                        <div class="content-img"><img src="images/mouse.jpg" alt=""></div>
                        <span>罗技数据1TB移动鼠标729元开抢了!</span>
                    </div>
                    <div class="chunk">
                        <div class="content-img"><img src="images/earphone.jpg" alt=""></div>
                        <span>海森那尔极品耳机绝对不容错过!</span>
                    </div>
                    <div class="chunk">
                        <div class="content-img"><img src="images/Wancom.jpg" alt=""></div>
                        <span>亚马逊随时阅读，随时记录，时尚最佳选择!</span>
                    </div>
                    <div class="chunk">
                        <div class="content-img"><img src="images/Frame.jpg" alt=""></div>
                        <span style="left: 64px;">优雅相框</span>
                    </div>
                    <div class="chunk">
                        <div class="content-img"><img src="images/notebook.jpg" alt=""></div>
                        <span>IBM 2009最新上网本，特色尽显</span>
                    </div>
                </div>
            </div>
            <div class="right-nav">
                <div class="right-father">
                    <div class="right-chunk">
                        <div class="right-img"><img src="images/show1.jpg" alt=""></div>
                        <span>大牌狂降价，三折直送</span>
                    </div>
                    <div class="right-chunk">
                        <div class="right-img"><img src="images/show2.jpg" alt=""></div>
                        <span>大学要求老师开网店</span>
                    </div>
                    <div class="right-chunk">
                        <div class="right-img"><img src="images/show3.jpg" alt=""></div>
                        <span >黑眼圈推荐，美白不停</span>
                    </div>
                    <div class="right-chunk">
                        <div class="right-img"><img src="images/show4.jpg" alt=""></div>
                        <span>瘦身狂潮风，修形之选</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <iframe src="footer.html" frameborder="0" style="width: 980px;"></iframe>
        </div>
    </div>

    <!-- 轮播图js -->
    <script>
        console.log($)
        // 记录当前图片的索引值，初始化的时候是第一张
        var index = 0 ;
        // 开启一个定时器
        var timer = setInterval(nextImg,1000)

        // $('.page .next') 找到下一页的元素
        // .click 监听点击事件
        $('.page .next').click(function() {
           nextImg()
        })
        function nextImg(){
        //显示下一页图片
            index++;
            if(index == 4){
                index=0;
            }
            showImg()
        }
        $('.page .prev').click(function(){
            index--;
            if(index==-1){
                index = 3
            }
            showImg()
        })

        function showImg(){
            // eq(index)找到第几个a标签
            // .show（）相当于display：block；将元素显示出来
            // .siblings（）除了当前这个标签外的其他同级元素
            //  .hide（）关闭掉
            $('.pic a').eq(index).show().siblings().hide();

            $('.indicator span').eq(index).addClass('active')
            .siblings().removeClass('active')
        }
        $('.page span').hover(()=>{
            // 鼠标移入事件
            // 清除定时器
            clearInterval(timer);
        },()=>{
            // 鼠标移除事件
            timer = setInterval(nextImg, 1000)
        })


        $('.indicator span').hover(function(){
            // 鼠标移入事件
            // 清除定时器
            clearInterval(timer);

            // 获取当前 span 他的索引值
            index = $(this).index();
            showImg()

        },()=>{
            // 鼠标移除事件
            timer = setInterval(nextImg, 1000)
        })
    </script>


</body>

</html>